<template>
  <div class="container">
    <!-- 盒子容器，放在一起进行平移 -->
    <div class="phone-wrapper move">
      <div v-for="(phone, index) in phones" :key="index" class="phone-box">
        {{ phone }}
      </div>
      <!-- 复制一组盒子以实现无缝循环 -->
      <div
        v-for="(phone, index) in phones"
        :key="'copy-' + index"
        class="phone-box"
      >
        {{ phone }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PhoneCarousel",
  props: {
    phones: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.phone-wrapper {
  display: flex;
  position: absolute;
  white-space: nowrap;
}

.phone-box {
  padding: 3px 15px;
  color: #fff;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.44);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  font-size: 16px;
  margin-right: 10px; /* 每个盒子之间的间距为10px */
}

@keyframes moveRight {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-100%); /* 从左向右平移 */
  }
}

.move {
  animation: moveRight 30s linear infinite; /* 盒子持续右移 */
}
</style>
